import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;

import HmButton from "./components/HmButton.vue";
Vue.component("HmButton", HmButton);
Vue.directive("can", {
  inserted(el, binding) {
    el.style.color = binding.value;
  },
});

Vue.directive("test", {
  update(el, binding) {
    if (binding.value.trim().length > 3 && binding.value.trim().length < 7) {
      el.style.color = "red";
    } else {
      el.style.color = "green";
    }
  },
});

Vue.directive("last", {
  inserted(el, binding) {
    el.style.transform = `translateX(${binding.value}px)`;
  },
});

Vue.directive("active", {
  inserted(el, binding) {
    const list = el.childNodes;
    list.forEach((item) => {
      item.onclick = function () {
        list.forEach((item) => (item.style.background = ""));
        this.style.background = "red";
      };
    });
    list[binding.value].style.background = "red";
  },
});

new Vue({
  //   data() {
  //     return {
  //       msg: "hello 猪头",
  //     };
  //   },
  //   render(createElement) {
  //     return createElement("h1", ["hello 葛葛"]);
  //   },
  render: (h) => h(App),
}).$mount("#app");
